
<template>
  <el-container>
    <el-header>
      <el-menu
          :default-active="activeIndex"
          class="HomeChoose"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          router
      >
        <el-menu-item index="0">
          <img
              style="width: 60px"
              src="@/logo.png"
              alt="SC logo"
          />
        </el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="home"><el-icon><House /></el-icon>首页</el-menu-item>
        <el-sub-menu :index="item.path" v-for="item in menu_data" :key="item.name" >
          <template #title><el-icon><component :is="item.icon"></component></el-icon>
            <span>{{item.name}}</span></template>
          <el-menu-item :index="child.path" v-for="child in item.child" :key="child.name" >
            <el-icon><component :is="child.icon"></component></el-icon>{{child.name}}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="announcement"><el-icon><Help /></el-icon>我的消息</el-menu-item>
        <el-menu-item index="3"><el-icon><Phone /></el-icon>联系我们</el-menu-item>

        <div class="IDpicture">
          <el-input v-model="input2" class="searchFunction" placeholder="请输入搜索的功能">
            <template #suffix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
          <el-avatar @click="ToHome()"
                     src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </div>
      </el-menu>
    </el-header>
    <el-main>

<!--      <el-button style="margin-right: 20px" class="button1" type="button">添加车位</el-button>-->
<!--      <el-button style="margin-right: 20px" class="button2" type="button">删除车位</el-button>-->
      <el-divider
          style="margin-top: 70px; border-bottom-style:groove; "
          content-position="left">
        <h2>查看消息</h2>
      </el-divider>
      <el-table :data="tableData" style="width: 100%">

        <el-table-column  prop="noticeTime" label="时间" width="250" />
        <el-table-column  prop="noticeType" label="类型" width="300" />
        <el-table-column  prop="noticeText" label="内容" width="1000" />
        <el-table-column  fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer></el-footer>
  </el-container>

</template>

<script setup>
import {onMounted, ref} from 'vue'
import { ElInput, ElIcon } from 'element-plus';
import { Search } from '@element-plus/icons';
import *as announcement from '../api/announcement'
import {useStore} from "vuex";
import * as complain from "@/api/complain-management";

const menu_data=ref([
  {
    name: '物业服务',
    icon: 'OfficeBuilding',
    path: '/community',
    child: [
      {
        name: '物业费缴纳',
        icon: 'ChatRound',
        path: '/stratafees',
      },
      {
        name: '车位管理',
        icon: 'Pointer',
        path: '/park',
      },
      {
        name: '报事维修',
        icon: 'ChatRound',
        path: '/maintenance',
      },
      {
        name: '事项投诉',
        icon: 'ChatRound',
        path: '/complaints',
      },
      {
        name: '访客登记',
        icon: 'ChatRound',
        path: '/visitor',
      },
    ]
  },
  {
    name: '商城',
    icon: 'Goods',
    path: '/index/Shopping',
    child:[
      {
        name: '商城首页',
        icon: 'Goods',
        path: '/shophome',
      },
      {
        name: '我的收藏',
        icon: 'Goods',
        path: '/collect',
      },
      {
        name: '我的购物车',
        icon: 'Goods',
        path: '/shoppingcart',
      },
      {
        name: '我的订单',
        icon: 'Goods',
        path: '/Order',
      },
      {
        name: '我的钱包',
        icon: 'Goods',
        path: '/wallet',
      }
    ]
  },
])
const tableData = ref([])

const activeIndex = ref('1')

const store = useStore();

function formatDate(isoDate) {
  const date = new Date(isoDate);
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // getMonth() 返回的是从 0 开始的月份，所以需要加 1
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 构建格式化后的字符串
  const formattedDate = `${year}年${month}月${day}日${hours}:${minutes}:${seconds}`;

  return formattedDate;
}


onMounted(() => {
  // 执行初始化操作
  announcement.announcement_queryById({ userId: store.getters.getId }).then((res) => {
    console.log(store.getters.getId);
    tableData.value = res.data;
    for (let i = 0; i < tableData.value.length; i++) {
      tableData.value[i].noticeTime = formatDate(tableData.value[i].noticeTime);
    }
  });

  // 每五秒钟更新数据库
  const updateInterval = setInterval(() => {
    announcement.announcement_queryById({ userId: store.getters.getId }).then((res) => {
      tableData.value = res.data;
      for (let i = 0; i < tableData.value.length; i++) {
        tableData.value[i].noticeTime = formatDate(tableData.value[i].noticeTime);
      }
    });
  }, 1000);

  // 在组件销毁时清除定时器，避免内存泄漏

});

const handleClick = (row) => {
  announcement.announcement_delete({ noticeId: row.noticeId}).then((res)=>{
    if(res.code==200){
      alert("删除成功")
    }
  })
  console.log(row);
};
</script>
<style scoped>
.button1 {
  width: 80px;
  margin-left: 1100px;
  height: 30px;
  color: white;
  background: dodgerblue;
}
.button2 {
  width: 80px;
  height: 30px;
  margin-right: 30px; /* 根据需要调整间距 */
  color: white;
  background:red;
}
.el-header {
  flex: 0 0 10%; /* header占据20%高度，且不缩放 */
  line-height: 1; /* 重置line-height，避免继承影响 */
  padding: 0 0px; /* 添加内边距以防止内容贴近边缘 */
}

.el-footer {
  flex: 0 0 10%; /* footer占据10%高度，且不缩放 */
  line-height: 1; /* 同上 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.el-main {
  flex: 1; /* main占据剩余空间 */
  padding: 20px; /* 添加内边距 */
}
.searchFunction{
  height: 28px;
  width: 80%;
  right: 40px;
}
/*头部边框阴影*/
.HomeChoose{
  height: 100%;
  border: none;
  padding: 0;
  box-shadow: 0px 2px 0px 0 rgba(0,0,0,0.1);
  display: flex;
}
.flex-grow {
  flex-grow: 0;
}
.IDpicture{
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 让头像与其他内容分开排列 */
  align-items: center; /* 垂直居中对齐 */
  margin-left: 48%;/* 调整左右内边距 */
}



</style>